<!--
 * @author: 十一
 * @since: 2024-04-06
 * user-list.vue
 * @desc: new page
-->
<template>
  <PageHeader title="用户管理">
    <template v-slot:S1>
      <a-button key="2" @click="getData">
        <template #icon>
          <i class="iconfont icon-content icon-shuaxin mr-2"></i>
        </template>
        刷新</a-button>
      <a-button key="1" type="primary" @click="showDrawer(0, {})">新增</a-button>
    </template>
  </PageHeader>
  <a-form layout="inline">
    <a-form-item class="!mb-4">
      <a-input allowClear v-model:value="formState.nickname" placeholder="昵称查询"> </a-input>
    </a-form-item>
    <a-form-item class="!mb-4">
      <a-input allowClear v-model:value="formState.phone_number" placeholder="手机号查询">
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="getData">查询</a-button>
    </a-form-item>
  </a-form>
  <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
    <template #bodyCell="{ column, value }">
      <template v-if="column.key === 'avatar_url'">
        <a-image :src="value" />
      </template>
      <template v-if="column.key === 'user_type'">
        <a-tag color="#2db7f5">{{ formatDictionaryItem('USER_TYPE', value) }}</a-tag>
      </template>
      <template v-if="column.key === 'gender'">
        <a-tag :color="value == 0 ? '#2db7f5' : 'pink'">{{
          formatDictionaryItem('GENDER', value)
        }}</a-tag>
      </template>
      <template v-if="column.key === 'operation'">
        <a-tag color="#2db7f5" style="cursor: pointer" @click="showDrawer(1, value)">编辑</a-tag>
        <a-tag color="#f50" style="cursor: pointer" @click="handleDeleteUser(value)">删除</a-tag>
      </template>
    </template>
  </a-table>
  <br />
  <a-pagination @change="changePagination" v-model:current="formState.current" :total="formState.total" :show-total="(total) => `共 ${total} 数据`" style="float: right" />
  <UserComponents ref="userComponents" @childGetData="getData" />
</template>

<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue'
import UserComponents from './components/user-components.vue'
import PageHeader from '@/components/pageHeader.vue'
import type { UnwrapRef } from 'vue'
import { getUserList, deleteUser } from '@/servers/main'
import { message } from 'ant-design-vue'
import { formatDictionaryItem } from '@/utils/common'

interface FormState {
  nickname: string
  phone_number: string
  pageSize: number
  current: number
  total: number
}
const formState: UnwrapRef<FormState> = reactive({
  pageSize: 10,
  current: 1,
  total: 0,
  nickname: '',
  phone_number: ''
})
let dataSource = ref([])

const columns = [
  {
    title: '头像',
    dataIndex: 'avatar_url',
    key: 'avatar_url',
    width: 80
  },
  {
    title: '手机号',
    dataIndex: 'phone_number',
    key: 'phone_number'
  },
  {
    title: '用户类型',
    dataIndex: 'user_type',
    key: 'user_type',
    align: 'center'
  },
  {
    title: '昵称',
    dataIndex: 'nickname',
    key: 'nickname',
    align: 'center'
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
    align: 'center'
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
    align: 'center'
  },
  {
    title: '生日',
    dataIndex: 'birth_date',
    key: 'birth_date',
    align: 'center'
  },

  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 140
  }
]
const current = ref(1)
const userComponents = ref()
const drawerOptions = reactive({
  title: '新增用户',
  options: {},
  state: 0
})
// 获取用户信息列表
function getData() {
  const { total, ...result } = toRaw(formState)
  getUserList(result).then((response: any) => {
    formState.total = response.result.total
    dataSource.value = response.result.list
  })
}
getData()

// 删除用户

function handleDeleteUser(value: any) {
  deleteUser({ id: value.id }).then((responese: any) => {
    if (responese.status === 200) {
      message.success(responese.message)
      console.log(responese)
      getData()
    } else {
      message.error(responese.message)
    }
  })
}

// 编辑用户
function showDrawer(state: number, value: object) {
  drawerOptions.state = state
  if (state == 0) {
    drawerOptions.title = '新增用户'
    drawerOptions.options = {}
  } else {
    drawerOptions.title = '编辑用户'
    drawerOptions.options = value
  }
  userComponents.value.showDrawer(drawerOptions)
}
</script>

<style lang="less" scoped></style>
